<template>
  <view class="" style="height: 100%">
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      :refresher-triggered="triggered"
      refresher-background="#f4f7f8"
      :refresher-threshold="100"
      @scrolltolower="onPulling"
      refresher-enabled="true"
      @refresherrefresh="onRefresh"
      refresher-default-style="black"
    >
      <slot name="default" :list="list">
        {{ list }}
      </slot>

      <u-loadmore :status="status" />

      <view class="" style="height: 2rpx"></view>
    </scroll-view>
  </view>
</template>

<script>
  import qs from "qs";
  export default {
    components: {},
    props: {
      seardata: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      api: {
        typeof: Function,
        default: async () => {
          return () => [];
        },
      },
      cmax: {
        typeof: [Number, String],
        default: 10,
      },
    },
    data() {
      return {
        status: "loadmore",
        triggered: false,
        list: [],
      };
    },
    computed: {
      reqdata() {
        let r = {
          // sjs: `${this.$z.timefn.gettime(360)} 00:00:00`,
          // sje: `${this.$z.timefn.gettime("-1")} 00:00:00`,
          // // b_end: "0"
          // ...this.seardata
        };
        r.csta = this.list.length;
        r.cmax = this.cmax;
        // r.uUser = this.$store.state.user.USearch.uUser
        // sjs	输入	开始时间;格式 YYYY-MM-DD HH-MM-SS
        // sje	输入	结束时间;格式 YYYY-MM-DD HH-MM-SS
        return r;
      },
    },
    mounted() {
      this.onPulling();
    },
    methods: {
      async onPulling() {
        if (this.status == "loading") {
          return;
        }
        console.log("onPulling");
        this.status = "loading";
        await this.getdata();
      },
      async onRefresh() {
        if (this.status == "loading") {
          return;
        }
        this.status = "loading";
        console.log("onRefresh");
        this.triggered = true;
        this.list = [];

        await this.getdata();
        this.triggered = false;
      },
      async getdata() {
        uni.showLoading();

        let reqdata = await this.api(this.reqdata);
        uni.hideLoading();
        this.list = this.list.concat(reqdata);
        this.status = reqdata.length >= 10 ? "loadmore" : "nomore";
      },
    },
  };
</script>

<style lang="scss">
  .scroll-Y {
    height: 100%;
  }

  .carditem {
    background: #fff;
    margin: 30rpx;
    border-radius: 10rpx;

    .ddh {
      height: 100rpx;
      font-size: 30rpx;
      position: relative;
      padding: 0 30rpx;

      &::after {
        content: "";
        position: absolute;
        left: 30rpx;
        bottom: 0;
        height: 1rpx;
        background: #e5e5e5;
        right: 30rpx;
      }
    }

    .sj {
      height: 80rpx;
      font-size: 28rpx;
      position: relative;
      padding: 0 30rpx;

      &::after {
        content: "";
        position: absolute;
        left: 30rpx;
        bottom: 0;
        height: 1rpx;
        background: #e5e5e5;
        right: 30rpx;
      }
    }

    .je {
      height: 120rpx;
      justify-content: flex-end;
      padding: 0 30rpx;
      font-size: 24rpx;

      .text {
        font-size: 36rpx;
        font-weight: bold;
        color: #2093f5;
      }
    }
  }
</style>
